<template>
  <el-card v-loading="loading" shadow="hover" style="height: 100%; position: relative">
    <div slot="header" style="text-align: center; font-size: 20px;font-weight: bolder;color: #666; padding: 10px">
      <span>导出工序验收完成情况报表</span>
    </div>
    <el-form ref="crForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="选择项目" prop="projectId">
        <el-select v-model="form.projectId" style="width: 100%" filterable clearable placeholder="请选择项目">
          <el-option v-for="(item, index) in projects" :key="index" :label="item.cflastname" :value="item.fid" />
        </el-select>
      </el-form-item>
      <el-form-item label="验收时间" prop="dateRange">
        <el-date-picker
          v-model="form.dateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="包含旧工序" prop="dateRange">
        <el-radio-group v-model="form.containOld">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div style="text-align: center;width: calc(100% - 40px); position: absolute; bottom: 30px">
        <el-button type="primary" @click="exportHandler">导出</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script>
import { downloadCompletionReport } from '@/api/statement/exportFile'
import moment from 'moment'
export default {
  name: 'FilterForm',
  components: {
  },
  props: {
    projects: { type: Array, default: () => [] }
  },
  data() {
    return {
      form: {
        projectId: '',
        dateRange: [],
        containOld: false
      },
      rules: {
        projectId: [
          { required: true, message: '请选择项目', trigger: 'blur' }
        ],
        dateRange: [
          { required: false, message: '请选择日期范围' }
        ]
      },
      loading: false,
      pickerOptions: {
        disabledDate: time => {
          return moment(time).isBefore(moment('2021-08-10')) || moment(time).isAfter(moment())
        },
        shortcuts: [{
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 360)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {
  },
  methods: {

    /**
     * 导出
     */
    exportHandler() {
      this.$refs.crForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const params = { ...this.form }
          let beginDate = ''
          let endDate = ''
          if (params.dateRange && params.dateRange.length > 0) {
            beginDate = params.dateRange[0]
            endDate = params.dateRange[1]
          }
          downloadCompletionReport({ projectId: params.projectId, beginDate, endDate, containOld: params.containOld }).then(file => {
            const elink = document.createElement('a')
            const blob = new Blob([file])
            elink.download = '工程协同关键工序验收完成情况.docx'
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            // 释放URL 对象
            URL.revokeObjectURL(elink.href)
            document.body.removeChild(elink)
          }).catch(msg => {
            this.$message.error(msg)
          }).finally(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
